<template>
  <div>
    <button @click="handleClick">显示/消失</button><br/>
    <transition name="hello" appear>
      <div v-show="isShow" class="box">VUE动画效果</div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "Test-component",
  data(){
    return {
      isShow:true
    }
  },
  methods:{
    handleClick(){
      this.isShow = !this.isShow
    }
  }
}
</script>

<style scoped>
.box{
  height: 100px;
  background-color: orange;
  font-size: 40px;
  font-weight: bold;
}

.hello-enter-active{
  animation: move 1s linear;
}
.hello-leave-active{
  animation: move 1s linear reverse;
}

@keyframes move {
  from{
    transform: translateX(-100%);
  }
  to{
    transform: translateX(0);
  }
}
</style>